<template>
	<view class="home">
		<!-- 轮播图 -->
		<view class="banner">
			<swiper class="swipers" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
				<swiper-item v-for="item in swiperList" :key="item.id">
					<image :src="item.pic" mode=""></image>
				</swiper-item>
			</swiper>
		</view>

		<!-- 首页分类 -->
		<view class="kinds">
			<view class="kinds_item" v-for="item in kindsList" :key="item.id" @tap="goToProductsList(item.id)">
				<view class="item_image">
					<image :src="item.icon" mode=""></image>
				</view>
				<view class="item_titie">
					<text>{{item.name}}</text>
				</view>
			</view>
		</view>

		<!-- 限时活动 -->
		<view class="timeActivity">
			<image class="activityImage" src="/static/icons/x.png"></image>
			<view class="activityTitle">
				<text>限时活动:</text>
			</view>
			<view class="activityCont">
				<swiper :vertical="true" :autoplay="true" :interval="3000" :duration="1000" :circular="true">
					<swiper-item v-for="item in timeActivityList" :key="item.productId" @tap="goToProductsDetail(item.productId)">
						<view class="swiper-item">
							<view class="item_name">
								<text>{{item.name}}</text>
							</view>
							<view class="item_price">
								<view class="originalPrice">
									{{item.price}}
								</view>

								<view class="presentPrice">
									现价:{{item.promotionPrice}}元
								</view>
							</view>
						</view>
					</swiper-item>
				</swiper>
			</view>
		</view>

		<!-- 热门推荐 -->
		<view class="hotShop">
			<view class="hotTit">
				热门推荐
			</view>

			<view class="hotListShop">
				<swiper autoplay :interval="3000" :duration="1000" :display-multiple-items="3" circular>
					<swiper-item v-for="item in hotList" :key="item.id" @tap="goToProductsDetail(item.id)">
						<view class="swiper-item">
							<image :src="item.pic"></image>
							<view class="imageTit">
								{{item.name}}
							</view>
						</view>
					</swiper-item>
				</swiper>
			</view>
		</view>


		<!-- 新品推荐 -->
		<view class="newShop">
			<view class="newTit">
				新品推荐
			</view>

			<scroll-view class="newList" :scroll-x="true" style="white-space: nowrap;">
				<view class="list_item" v-for="item in newList" :key="item.id" @tap="goToProductsDetail(item.id)">
					<image :src="item.pic" mode=""></image>
					<view class="item_info">
						<view class="item_name">
							{{item.name}}
						</view>
						<view class="item_peice">
							价格：{{item.price}}
						</view>
					</view>
				</view>
			</scroll-view>

		</view>

		<!-- 猜你喜欢 -->
		<view class="bestSellerShop">
			<view class="bestSellerTit">
				猜你喜欢
			</view>
			<productlist :bestSellerList='bestSellerList'  @detail='detail' />
		
		</view>

	</view>
</template>

<script>
	// api
	import {
		bannerAds,
		findCategory,
		recommendList,
		hotList,
		lejuLatestProducts,
		saleMostProducts
	} from '@/api/home/index.js'
	//组件
	import productlist from '@/components/ProductList/ProductList.vue'
	
	export default {
		data() {
			return {
				swiperList: [], //轮播图列表
				kindsList: [], //分类列表
				timeActivityList: [], //限时活动
				hotList: [], //热门推荐
				newList: [], //新品推荐
				bestSellerList: [], //猜你喜欢
			}
		},
		components:{
			productlist
		},
		onLoad() {
			this.getInit();
		},
		methods: {
			
			//初始化
			getInit(){
				this.getSwipers();
				this.getKinds();
				this.getTimeActivity();
				this.getHotList();
				this.getNewList();
				this.getBestSellerList();
			},
			
			// 轮播图
			getSwipers() {
				bannerAds().then(res => {
					// console.log(res);
					let {
						data
					} = res.data;
					this.swiperList = data.items;
					// console.log(this.swiperList);

				})
			},

			// 分类
			getKinds() {
				let id = '1308336521604599809';
				findCategory(id).then(res => {
					// console.log(res);
					let {
						data
					} = res.data;
					this.kindsList = data.category.children;
					// console.log(this.kindsList);
				})
			},

			// 限时活动
			getTimeActivity() {
				recommendList().then(res => {
					let {
						data
					} = res.data;
					this.timeActivityList = data.items;
					// console.log(this.timeActivityList);
				});
			},

			// 热门推荐
			getHotList() {
				hotList().then(res => {
					let {
						data
					} = res.data;
					this.hotList = data.items;
					// console.log(this.hotList);
				})
			},

			// 新品推荐
			getNewList() {
				lejuLatestProducts().then(res => {
					let {
						data
					} = res.data;
					this.newList = data.productList;
					// console.log(this.newList);
				})
			},

			// 猜你喜欢
			getBestSellerList() {
				saleMostProducts().then(res => {
					let {
						data
					} = res.data;
					this.bestSellerList = data.items;
					// console.log(this.bestSellerList);
				})
			},
			
			//分类跳转到商品列表
			goToProductsList(id){
				uni.navigateTo({
					url:'/pages/typeProductsList/typeProductsList?id=' +id
				})
			},
			
			//跳转到商品详情
			goToProductsDetail(id){
				uni.navigateTo({
					url:'/pages/productDetail/productDetail?id=' + id
				})
			},
			
			detail(val){
				this.goToProductsDetail(val);
			}
			
			
		},
		
		//上拉刷新
		onPullDownRefresh() {
			   this.getInit();
			   uni.stopPullDownRefresh();
		}
	}
</script>

<style lang="scss">
	.home {
		.swipers {
			width: 100%;
			height: 362rpx;

			.swiper-item {
				overflow: hidden;
			}

			image {
				width: 100%;
				height: 100%;
				border-radius: 0 0 15px 15px;
			}
		}


		.kinds {
			display: flex;
			justify-content: space-around;
			margin: 60rpx auto;

			.kinds_item {
				.item_image {
					image {
						width: 80rpx;
						height: 80rpx;
						border-radius: 4px;
					}
				}

				.item_titie {
					font-size: 32rpx;
					color: #3e3e3e;
					text-align: center;
				}
			}
		}

		.timeActivity {
			width: 670rpx;
			height: 96rpx;
			font-size: 28rpx;
			display: flex;
			align-items: center;
			background: #fff;
			margin: 40rpx auto;
			padding: 0 30rpx;
			text-indent: 0.5em;
			box-sizing: border-box;

			.activityImage {
				width: 48rpx;
				height: 48rpx;
			}

			.activityTitle {
				font-weight: 600;
				color: orange;
			}

			.activityCont {
				flex: 1;
				height: 96rpx;
				box-sizing: border-box;

				swiper {
					height: 100%;

					.swiper-item {
						height: 100%;
						display: flex;
						align-items: center;

						.item_name {
							width: 250rpx;
							overflow: hidden;
							white-space: nowrap;
							text-overflow: ellipsis;
						}

						.item_price {
							font-size: 24rpx;
							font-weight: 600;

							.originalPrice {
								color: rgb(51, 51, 51);
								line-height: 40rpx;
								text-decoration: line-through;
							}

							.presentPrice {
								color: red;
							}
						}
					}
				}
			}
		}

		.hotShop {
			margin: 0 30rpx;

			.hotListShop {
				swiper {
					.swiper-item {
						margin: 0 20rpx;

						image {
							width: 208rpx;
							height: 176rpx;
						}

						.imageTit {
							font-size: 26rpx;
							margin-top: 20rpx;
							text-align: center;
							line-height: 38rpx;
							color: #3e3e3e;
							font-weight: 600;
							overflow: hidden;
							white-space: nowrap;
							text-overflow: ellipsis;
						}
					}
				}
			}
		}

		.newShop {
			margin: 0 30rpx;

			.newList {
				.list_item {
					display: inline-flex;
					width: 590rpx;
					margin-right: 20rpx;
					background-color: #fff;
					border-radius: 20rpx;
					padding: 50rpx 40rpx;
					box-sizing: border-box;

					image {
						width: 194rpx;
						height: 168rpx;
						margin-right: 30rpx;
					}

					.item_info {
						flex: 1;
						display: flex;
						flex-direction: column;
						justify-content: space-between;
						font-size: 26rpx;

						.item_name {
							height: 72rpx;
							display: -webkit-box;
							-webkit-line-clamp: 2;
							overflow: hidden;
							text-overflow: ellipsis;
							-webkit-box-orient: vertical;
							white-space: normal;
						}
					}
				}
			}
		}

		.bestSellerShop {
			margin: 0 30rpx;

		
		}




		.hotTit,
		.newTit,
		.bestSellerTit {
			padding: 30px 0;
			font-family: PingFangSC-Semibold;
			font-size: 16px;
			color: #3e3e3e;
			letter-spacing: 1px;
			font-weight: 600;
		}

	}
</style>
